<?php include("include/headerp.php"); ?>
<link href="css/slider.css" rel="stylesheet">	 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<style>
 #map-canvas {
	width:500px;
	height: 400px;
  }
</style>
<script>
$(document).ready(function () {
$("#overlay").click(function() {
	$("#map-canvas").fadeOut( "slow" );
	$("#overlay").fadeOut( "slow" );
});
});

function initialize(lat,lon) {
$("#map-canvas").fadeIn( "slow" );
$("#overlay").fadeIn( "slow" );
if(lat == ''&& lon == ''){
lat = 0;
lon =0 ;
}
  var myLatlng = new google.maps.LatLng(lat,lon);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });
}
//google.maps.event.addDomListener(window, 'load', initialize);

</script>
<?php include("include/db.php");
$sql = mysqli_query($link, "select * from on_projects"); ?>
<body id="homepage">

    
        <div id="slider-animated" style="width:990px;height:418px;margin-top: 10px;position:relative;">
           <div id="flexslider" class="flexslider" style="width:990px !important;height:418px !important;">
            <ul class="slides" style="width:990px !important;height:418px !important;">
              <!-- slide 1 -->
			  <?php while($row = mysqli_fetch_array($sql)){ ?>
				<li>
					<div class="inner" style="width:990px;height:418px;">
						<div style=""><img src="img/<?php echo $row['image']; ?>" style="width:550px;height: 398px;display:block !important;float:left;border: 10px solid #1D7717;border-radius:5px;position:relative;z-index:1;"></div>
						<div style="position:absolute;padding:10px 10px 10px 40px;left:555px;z-index:0;width:380px;height:375px;float:left;margin-top:10px;background-color:black !important;border-top-right-radius:10px;border-bottom-right-radius:10px;">
						<div style="text-align:center;margin-top:20px;"><font color="#D6D6D6" face="Monotype Corsiva" style="font-size:42px;"><b>Ongoing Projects</b></font></div>
						
						<p style="margin-top:30px;">Project Name: <font color="red"><?php echo $row['title']; ?></font></p>
						
						<p style="margin-top:10px;">Location: <?php echo $row['location']; ?></p>
						
						<p style="margin-top:10px;">property Type: <?php echo $row['type']; ?></p>
						<p style="margin-top:10px;text-align:center;"><?php echo $row['description']; ?></p>
						<?php if(isset($row['latitude'])&&isset($row['longitude'])){?>
						<p style='float:left;margin-left:10px;margin-top:20px;width:200px;border-radius:10px;color:red;cursor:pointer;background-color:#DCDCDC;text-align:center;' id='show_map' onclick="initialize(<?php echo $row['latitude']; ?>,<?php echo $row['longitude']; ?>);"><b>Show in Map</b></p>
						<div style="position:absolute;background-color:rgb(116, 112, 112);bottom:0px;padding:5px;border:2px solid black;border-radius:10%;"><a href="map.php?type=map&id=<?php echo $row['id'];?>" style="margin-right:175px;"><strong>Route Map</strong></a>
						<a href="map.php?type=layout&id=<?php echo $row['id'];?>"><strong>Layout Map</strong></div>
						<?php } ?>
						</div>
					</div>
				  </li>
				 <?php } ?>
				
				 					
			</ul>
          </div>  
		</div>

<script src="js/jquery.flexslider-min.js"></script>
<script src="js/main.js"></script>

<script>
$(window).load(function() {
  $('.flexslider').flexslider({
    slideshow: false
  });
});
</script>             
		
<div id="map-canvas" style="position:relative;
float: left;
padding: 20px;
top: -450px;
z-index:99999;
margin-left: 0;
display:none;left: 235px;
background-color: #B9B9B9;"></div>
<div id="overlay" style="top: 0;
width: 100%;
height: 1075px;
z-index: 9999;
position: fixed;left:0px;
display:none;
background-color: black;
opacity: .6;"></div>
</div>
			<!-- end of container -->	
		</div>
		<!-- end of shell -->	
<?php include("include/footer.php"); ?>

